<template>
  <div>
    <!-- 栅格系统:24 -->
    <el-row :gutter="100">
      <el-col :span="8" :xs="24">
        <h1>我是第一列</h1>
      </el-col>
      <el-col :span="8">
        <h1>我是第二列</h1>
      </el-col>
      <el-col :span="8">
        <h1>我是第三列</h1>
      </el-col>
    </el-row>
    <!-- 按钮组件 -->
    <el-button type="primary" size="mini" :round="true">主要按钮</el-button>
    <el-button type="success" :loading="true" disabled>成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger" icon="el-icon-edit">危险按钮</el-button>

    <!--  单选按钮 -->
    <el-radio-group v-model="radio1">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>

    <!-- 卡片 -->
    <el-card>
      <div slot="header">123</div>
      <div>456</div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data(){
    return {
      radio1:'北京'
    }
  }
};
</script>

<style scoped>
h1 {
  background: skyblue;
}
</style>
